<!--
 * @Author: your name
 * @Date: 2021-05-11 14:54:27
 * @LastEditTime: 2021-05-17 16:24:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat-c/pages/searchPage/searchPage.vue
-->
<template>
  <view class="search-page">
    <!-- 顶部搜索 -->
    <xjx-search @searchInfo="searchInfo"
                :page="from"></xjx-search>
    <!-- 历史搜索 -->
    <view class="history border-top-1px">
      <block v-if="historyList.length">
        <view class="title">
          <text>历史搜索</text>
          <text class="clear"
                @click="clearAll"></text>
        </view>
        <view class="history-content">
          <view @click="searchInfo(item, 'history')"
                class="line-clamp-1"
                v-for="(item, index) in historyList"
                :key="index">{{item}}</view>
        </view>
      </block>
    </view>
    <!-- 弹出框 -->
    <van-dialog id="van-dialog"
                confirm-button-color="#2E87FF"
                cancel-button-color="#2E87FF" />
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { checkNormalName } from '@/common/js/util.js';
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
export default {
  data() {
    return {
      // 历史记录
      historyList: [],
      // 来源
      from: '',
      // 列表数
      listNum: 20
    };
  },
  computed: {
    ...mapState(['courseList', 'activityList', 'clubList'])
  },
  onLoad(option) {
    this.from = option.from || '';
  },
  onShow() {
    const courseList = uni.getStorageSync('courseList')
      ? JSON.parse(uni.getStorageSync('courseList'))
      : [];
    const activityList = uni.getStorageSync('activityList')
      ? JSON.parse(uni.getStorageSync('activityList'))
      : [];
    const clubList = uni.getStorageSync('clubList')
      ? JSON.parse(uni.getStorageSync('clubList'))
      : [];
    const coachList = uni.getStorageSync('coachList')
      ? JSON.parse(uni.getStorageSync('coachList'))
      : [];
    this.historyList =
      this.from === 'course'
        ? courseList
          : this.from === 'activity'
            ? activityList
              : this.from === 'coach'
                ? coachList
                  : clubList;
  },
  methods: {
    ...mapMutations(['setStateAttr']),
    // 搜索历史
    searchInfo(info, history) {
      // 限制输入
      info = info.trim();
      if (info && !checkNormalName(info)) {
        uni.showToast({
          title: '搜索内容不能有特殊符号',
          icon: 'none'
        });
        return;
      }
      // 搜索为空即取消
      let arr = [...new Set(this.historyList)];
      // 限制输入有值才会保存列表
      if (info && !history) {
        if (!arr.includes(info)) {
          if (arr.length > this.listNum - 1) {
            arr.pop();
            arr.unshift(info);
          } else {
            arr.unshift(info);
          }
        } else {
          let ind = arr.indexOf(info);
          arr.splice(ind, 1);
          arr.unshift(info);
        }
      }
      if (this.from === 'course') {
        this.setStateAttr([
          {
            key: 'searchValue',
            val: info
          },
          {
            key: 'courseList',
            val: arr
          }
        ]);
        uni.setStorageSync('courseList', JSON.stringify(arr));
      } else if (this.from === 'activity') {
        this.setStateAttr([
          {
            key: 'activityValue',
            val: info
          },
          {
            key: 'activityList',
            val: arr
          }
        ]);
        uni.setStorageSync('activityList', JSON.stringify(arr));
      } else if (this.from === 'club') {
        this.setStateAttr([
          {
            key: 'clubValue',
            val: info
          },
          {
            key: 'clubList',
            val: arr
          }
        ]);
        uni.setStorageSync('clubList', JSON.stringify(arr));
      }else if (this.from === 'coach') {
        this.setStateAttr([
          {
            key: 'coachValue',
            val: info
          },
          {
            key: 'coachList',
            val: arr
          }
        ]);
        uni.setStorageSync('coachList', JSON.stringify(arr));
      }
      let pages = getCurrentPages();
      let nowPage = pages[pages.length - 1];
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.isReload = true;
      uni.navigateBack({
        delta: 1
      });
    },
    // 清空历史
    clearAll() {
      Dialog.confirm({
        title: '确认要删除全部历史记录吗？',
        cancelButtonText: '取消',
        width: '325px',
        messageAlign: 'left',
        customStyle: 'border-radius:7.5px;',
        className: 'my-dialog-confirm'
      })
        .then(() => {
          this.historyList = [];
          if (this.from === 'course') {
            this.setStateAttr([
              {
                key: 'courseList',
                val: []
              }
            ]);
            uni.removeStorageSync('courseList');
          } else if (this.from === 'activity') {
            this.setStateAttr([
              {
                key: 'activityList',
                val: []
              }
            ]);
            uni.removeStorageSync('activityList');
          } else if (this.from === 'club') {
            this.setStateAttr([
              {
                key: 'clubList',
                val: []
              }
            ]);
            uni.removeStorageSync('clubList');
          }else if (this.from === 'coach') {
            this.setStateAttr([
              {
                key: 'coachList',
                val: []
              }
            ]);
            uni.removeStorageSync('coachList');
          }
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.search-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 68rpx;
  background: #fff;
}
.history {
  margin-top: 20rpx;
  width: 100%;
  padding: 30rpx;
  .title {
    position: relative;
    margin: 0 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    z-index: 2;
    text {
      color: $text-color;
    }
    .clear {
      width: 27rpx;
      height: 30rpx;
      background: url();
      background-size: 100% 100%;
    }
  }
  .history-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 2;
    // justify-content: space-between;
    view {
      margin-bottom: 20rpx;
      margin-right: 20rpx;
      padding: 4rpx 30rpx;
      color: $text-color;
      background: #f4f4f4;
      border-radius: 32rpx;
      font-size: 24rpx;
    }
  }
}
</style>